<!DOCTYPE html>
<html>
  <head>
    <title id="doctitle">Image gallery</title>
    <style type="text/css">
      body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      div#images {
        background-color: lightgrey;
        border-radius: 0.50em;
        margin: 20px;
        padding: 2em;
      }
      p {
        font-size: 16px;
        padding-bottom: 1.5em;
      }
      a:link, a:visited {
        color: #93a1a1;
        font-size: 24px;
        text-decoration: underline;
      }
      img {
        padding: 0.2em;
        border-radius: 0.25em;
      }
      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body> 
    <div id="images">

{% if 'metadata' in dag %}
      <h1 id="gtitle">{{ dag['metadata']['title'] }}</h1>
{% else %}
      <h1 id="gtitle">Unknown gallery title</h1>
{% endif %}

{% for node in dag['images'] %}

    <a href="ipfs://{{ node['raw']['/'] }}">
{% if node['thumbnail'] %}
            <img src="ipfs://{{ node['thumbnail']['/'] }}"
                 href="ipfs://{{ node['raw']['/'] }}"
                 title="{{ node['name'] }}" />
{% else %}
            <img src="ipfs://{{ node['raw']['/'] }}"
                 href="ipfs://{{ node['raw']['/'] }}"
                 title="{{ node['name'] }}" />
{% endif %}
    </a>
{% endfor %}

    </div>
  </body>
</html>
